<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <title>消息主页</title>
    <link rel="stylesheet" href="./plugs/viewer/viewer.min.css" />
    <link rel="stylesheet" href="./plugs/kindeditor/plug/modal/modal.min.css" />
    <link rel="stylesheet" href="./assets/icomoon/style.css" />
    <link rel="stylesheet" href="./plugs/kindeditor/editor/style.css" />
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/group.css" />
    <link rel="stylesheet" href="./css/detail.css" />
    <link rel="stylesheet" href="./css/index.css" />
  </head>

  <body>
    <div class="g-wrap">
      <div class="g-wrap-inner">
        <!-- 左侧用户列表 -->
        <div class="panel" id="panel">
          <!-- 搜索 -->

          <!-- 来信提示音 -->
          <audio
            id="audio"
            src="/assets/audio/8407.wav"
            style="display:none;"
          ></audio>

          <div class="m-sch">
            <i class="icon-jslt-13 sch-btn"></i>
            <input
              type="text"
              placeholder="搜索联系人"
              class="sch-ipt"
              id="sch-ipt"
              oninput="searchContacts(this.value)"
              onblur="hideSchRes()"
            />
            <!-- 有搜索结果 -->
            <div class="sch-res" id="sch-res">
              <!-- <div class="sch-res-item">
                            <div class="res-avatar">
                                <img src="./assets/images/preview.jpeg" alt="">
                            </div>
                            <div class="res-info">
                                <h4 class="nickname">张三张三张三张三张三张三张三张三张三张三张三</h4>
                            </div>
                        </div> -->
            </div>
            <!-- 无搜索结果 -->
            <div class="sch-res no-res" id="no-res">
              <h4 class="contact-title">找不到匹配的结果</h4>
            </div>
          </div>

          <div class="m-tab">
            <a
              href="javascript:;"
              class="active"
              id="show-related"
              onclick="showRelated(this)"
              >最近联系人</a
            >
            <a href="javascript:;" onclick="showGroup(this)">好友列表</a>
          </div>
          <!-- 最近联系人 -->
          <div class="m-contact-list" id="dropView">
            <!-- <div class="u-item ">
                       <div class="u-item-center">
                        <div class="avatar">
                            <img src="./assets/images/36d55e28202ceba349998477f2597eef.jpg" alt="">
                            <div class="unread">12</div>
                        </div>
                        <div class="info">
                            <div class="to">
                                <p  >
                                    <span class="nickname ellipsis">张三</span>
                                    <span class="time">10:45</span>
                                </p>
                                <p class="ellipsis">
                                    <span>输了你赢了世界又如何</span>
                                    <span class="circle"></span>
                                </p>
                            </div>

                        </div>
                       </div>
                    </div>
                    <div class="u-item active">
                      <div class="u-item-center">
                        <div class="avatar">
                            <img src="./assets/images/36d55e28202ceba349998477f2597eef.jpg" alt="">
                            <div class="unread">12</div>
                        </div>
                        <div class="info">

                                <div class="to">
                                    <p >
                                        <span class="nickname ellipsis">张三张三张三张三张三张三张三张三张三张三</span>
                                        <span class="time">10:45</span>
                                    </p>
                                    <p class="ellipsis">
                                        <span>输了你赢了世界又如何输了你赢了世界又如何</span>
                                        <span class="circle hide"></span>
                                    </p>
                                </div>

                        </div>
                      </div>



                    </div> -->
          </div>
          <!-- 好友列表 -->
          <div class="w-group" id="contactGroup">
            <!-- <div class="group-item">
                        <a href="javascript:;" class="group-name" onclick="toggleShow('friendsGroup',this)">
                            <i class="icon-jslt-15 arrow-right" id="arrow-right"></i>
                            <i class="icon-jslt-18 arrow-bottom" id="arrow-bottom"></i>
                            <span>我的好友 <span class="count-friends">2</span> </span>
                        </a>
                        <div class="group-member" id="friendsGroup">
                            <div class="member-item">
                                <div class="avatar">
                                    <img src="./assets/images/36d55e28202ceba349998477f2597eef.jpg" alt="">
                                </div>
                                <div class="info-base">
                                    <p>
                                        <span class="nickname ellipsis">张三</span>
                                    </p>
                                    <p class="ellipsis">
                                        <span>输了你赢了世界又如何输了你赢了世界又如何输了你赢了世界又如何</span>
                                        <span class="circle"></span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div> -->
          </div>
        </div>
        <!-- 中间聊天内容框 -->
        <div class="m-iframe" id="middle_chat_area">
          <div class="g-chat-wrap">
            <!-- 昵称和功能按钮 -->
            <div class="m-chat-header">
              <span class="chat-nickname" id="chat-nickname"></span>
              <div class="fun-area">
                <div class="i-box min" title="最小化">
                  <i class="icon-jslt-05"></i>
                </div>
                <div class="i-box max" title="最大化">
                  <i class="icon-jslt-17"></i>
                </div>
                <div class="i-box close" title="关闭">
                  <i class="icon-jslt-02"></i>
                </div>
              </div>
            </div>
            <!-- 消息主体 -->
            <div class="m-chat-body" id="m-chat-body">
              <div class="view-more-box">
                <div
                  class="view-more"
                  id="view-more"
                  onclick="viewMoreRecord()"
                >
                  <i class="icon-jslt-11"></i>
                  <span>查看更多消息</span>
                </div>
              </div>
              <div class="chat-list" id="chat-list">
                <!-- <div class="chat-time"><span class="times" style="background:red;">10:45</span></div>
                             <div class="chat-item clearfix self">

                                <div class="avatar">
                                    <img src="./assets/images/36d55e28202ceba349998477f2597eef.jpg" alt="">
                                </div>
                                <div class="chat-cont">
                                    <div class="cont">
                                        Hi，老同学最近在干啥呢?Hi，老同学最近在干啥呢?Hi，老同学最近在干啥呢?Hi，老同学最近在干啥呢?Hi，老同学最近在干啥呢?Hi，老同学最近在干啥呢?
                                    </div>
                                    <div class="triangle"></div>
                                    <div class="msg-unsend">
                                        <img src="./assets/images/loading.gif" alt="">
                                    </div>
                                </div>
                            </div>
                               <div class="chat-time"><span class="times" style="background:red;">10:45</span></div>
                            <div class="chat-item clearfix self">

                                <div class="avatar">
                                    <img src="./assets/images/36d55e28202ceba349998477f2597eef.jpg" alt="">
                                </div>
                                <div class="chat-cont">
                                    <div class="cont">
                                        Hi，老同学最近在干啥呢?
                                        <img src="./plugs/kindeditor/plugins/emoticons/images/0.gif" class="emoji-reg" />
                                    </div>
                                    <div class="triangle"></div>
                                    <div class="msg-unsend">
                                        <img src="./assets/images/fail.svg" class="failed">
                                    </div>
                                </div>
                            </div>
                                  <div class="chat-time"><span class="times" style="background:red;">10:45</span></div>
                            <div class="chat-item clearfix">

                                <div class="avatar">
                                    <img src="./assets/images/36d55e28202ceba349998477f2597eef.jpg" alt="">
                                </div>
                                <div class="chat-cont has-img">
                                    <div class="cont">
                                        <img src="./assets/images/preview.jpeg" id="large_img">
                                    </div>
                                    <div class="triangle"></div>
                                </div>
                            </div>  -->
              </div>
            </div>
            <!-- 聊天输入区 -->
            <div class="m-chat-footer">
              <!-- 历史记录 -->
              <i
                class="icon-jslt-11 record"
                title="聊天记录"
                onclick="handleClickViewRecord()"
              ></i>

              <!-- 输入框 -->
              <!-- <div class="ipt-area" id="ipt-area" onfocus="focus()"></div> -->
              <div class="ipt-area" id="ipt-area"></div>

              <!-- <div class="ipt-area" id="ipt-area">
							<textarea id="textarea-editor" name="textarea-editor" style="width: 100%; height: 100%;"></textarea>
						</div> -->
              <!-- 发送区 -->
              <div class="send-area">
                <!-- <button>123</button> -->

                <div class="send-box">
                  <div class="send-btn" onclick="handleClickSendMsg()">
                    发 送
                  </div>
                  <div class="line-split"></div>
                  <div class="choose-btn" onclick="handleShowChooseModel()">
                    <i class="icon-jslt-18"></i>
                  </div>

                  <div class="choose-model" id="choose-model">
                    <p
                      class="active"
                      onclick="handleSelectedModel('enter',this)"
                    >
                      <i class="icon-jslt-04"></i>
                      <span>按Enter键发送消息</span>
                    </p>
                    <p onclick="handleSelectedModel('ctrlEnter',this)">
                      <i class="icon-jslt-04"></i>
                      <span>按Ctrl+Enter键发送消息</span>
                    </p>
                  </div>
                </div>
              </div>
            </div>

            <!-- 粘贴发送图片弹出框 -->
            <div class="m-confirm-img">
              <div class="m-confirm-img-header">
                <div class="fun-area">
                  <div class="i-box close active" title="关闭">
                    <i class="icon-jslt-02"></i>
                  </div>
                </div>
              </div>
              <div class="m-confirm-main">
                <p class="title">发送图片</p>
                <div class="img-area">
                  <img
                    src="./assets/images/36d55e28202ceba349998477f2597eef.jpg"
                    alt=""
                  />
                </div>
                <div class="btn-box">
                  <div>取 消</div>
                  <div class="send">发 送</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 右侧快捷回复和用户详情 -->
        <div class="m-quick" id="right_baseinfo_area">
          <div class="m-quick-header">
            <div class="header-btns">
              <a
                href="javascript:;"
                class="header-btns-btn active"
                id="quick-reply-btn"
                onclick="showQuickReply(this)"
                >快捷回复</a
              >
              <a
                href="javascript:;"
                class="header-btns-btn"
                id="user-detail-btn"
                onclick="showUserDetails(this)"
                >用户详情</a
              >
            </div>
          </div>

          <!-- 快捷回复 -->
          <div class="m-quick-body" id="quick-reply">
            <!-- 右键菜单 -->

            <!-- <div id="container">
    <p>右键此区域</p>
    </div>


            <div id="menu" class="skin1">
                <div class="menuitems">
                    <a href="javascript:;" onclick="handleModify()">修改</a>
                    </div>
                    <div class="menuitems">
                    <a href="javascript:;" onclick="handleDelet()">删除</a>
                    </div>
            </div> -->
            <!-- <div id="menu" class="skin">
                  啊啊啊啊啊啊
                    <div class="menuitems">
                    <a href="javascript:history.back();">后退</a>
                    </div>
                    <div class="menuitems">
                    <a href="javascript:history.back();">前进</a>
                    </div>
                    </div> -->
            <a href="javascript:;" class="add-new" onclick="showAddQuick()"
              >+ 增加快捷回复</a
            >
            <div class="quick-body-search">
              <input type="text" placeholder="输入关键词搜索" />
              <a href="javascript:;" class="search-btn">搜索</a>
            </div>
            <div class="quick-body-choose">
              <a
                href="javascript:;"
                class="active"
                onclick="showPersonalQuick(this)"
                >文字</a
              >
              <a
                href="javascript:;"
                onclick="showPublicQuick(this)"
                >图片</a
              >
            </div>
            <div id="menu" style="display:none;">
                <ul>
                  <li onclick="handleModify(this)">修改</li>
                  <li onclick="handleDelete()">删除</li>
                </ul>
              </div>
            <!-- 个人快捷回复 -->
            <div class="quick-body-area" id="personal-quick">

              <!-- <div class="quick-item">




                个人快捷回复<a href="javascript:;" onclick="handleModify()"
                  >修改</a
                ><a href="javascript:;" onclick="handleDelet()">删除</a>
              </div> -->
            </div>

            <!-- 公共快捷回复 -->
            <div class="quick-body-area public-quick" id="public-quick">
              <!-- <div class="quick-item">
                公共快捷回复<a href="javascript:;" onclick="handleModify()"
                  >修改</a
                ><a href="javascript:;" onclick="handleDelet()">删除</a>
              </div> -->
            </div>
          </div>

          <!-- 用户详情 -->
          <div class="m-quick-body user-detail" id="user-detail">
            <!-- 基础信息 -->
            <div class="base-info" id="base_user_info">
              <!-- <p class="ellipsis">张三</p> -->
              <!-- <div class="account-info">
                            <div class="accout-type">
                                <p class="ellipsis">微信号：</p>
                                <p class="ellipsis">属账号：</p>
                            </div>
                            <div class="avatar-box">
                                <img src= "" alt="">
                            </div>
                        </div>
                        <p class="ellipsis">备注：</p>
                        <p class="ellipsis">地区：</p>
                        <div class="from">
                            <p class="ellipsis">来源：</p>
                            <a id="refresh" href="javascript:void(0)">刷新</a>
                        </div> -->
            </div>

            <!-- 订单总览 -->
            <div class="sub-total" id="base_wx_info">
              <!-- <a id="refresh" href="javascript:void(0)">刷新</a> -->

              <!-- <p class="ellipsis">总订单：100笔</p>
                        <p class="ellipsis">待结算订单数：1笔</p>
                        <p class="ellipsis">待结算积分：100.00元</p>
                        <p class="ellipsis">剩余积分：11548187.00元</p>
                        <p class="ellipsis">兑换中积分：1002.00元</p>
                        <p class="ellipsis">已兑换积分：230455.00元</p>
                        <p class="ellipsis">推荐人数：3242人</p>
                        <p class="ellipsis">提成积分：4775214.00元</p> -->
            </div>

            <!-- 订单详情 -->
            <div class="order-detail" id="base_order_info">
              <!-- <p class="ellipsis">订单号：2315841213512345</p>
                        <p class="ellipsis">潞娜定制维多利亚复古裙女2018秋冬新款名媛小香风宫廷丝绒连衣裙</p>
                        <p class="ellipsis">分佣佣金：1230.00元</p>
                        <p class="ellipsis">订单状态：已结算</p>
                        <p class="ellipsis">平台：淘宝</p>
                        <p class="ellipsis">分佣等级：3级</p>
                        <p class="ellipsis">2019-1-11 14:12:13 更新订单</p> -->
            </div>
          </div>
        </div>
      </div>

      <!-- 增加快捷回复弹窗 -->
      <div class="add-new-quick-box" id="add-new-quick-box">
        <div class="add-new-inner">
          <div class="add-new-header">
            增加快捷回复
            <i class="icon-jslt-02" onclick="cancelAddQuick()"></i>
          </div>
          <div class="add-new-form">
            <div class="add-new-choose">
              <form action="" method="get">
                快捷回复类型：
                <label
                  ><input
                    name="change"
                    type="radio"
                    value="0"
                    checked="checked"
                  />文字
                </label>
                <label
                  ><input name="change" type="radio" value="1" />图片
                </label>
              </form>
            </div>
            <input
              type="text"
              id="input"
              class="add-new-ipt inputNumber"
              placeholder="排序  0~100"
            />
            <textarea
              type="text"
              style="height:80px;"
              rows="30"
              cols="20"
              type="text"
              class="add-new-ipt"
              id="myText"
              placeholder="请输入快捷回复内容"
            ></textarea>
            <a
              href="javascript:;"
              class="add-new-btn"
              onclick="handleIncrease()"
              >增  加</a
            >
          </div>
        </div>
      </div>

      <!-- 修改快捷回复弹窗 -->
      <div class="add-new-quick-box" id="add-new-quick-box1">
        <div class="add-new-inner">
          <div class="add-new-header">
            修改快捷回复
            <i class="icon-jslt-02" onclick="cancelAddQuick1()"></i>
          </div>
          <div class="add-new-form">
            <div class="add-new-choose">
              <span></span>
              <form action="" method="get">
                快捷回复类型：
                <label
                  ><input name="change1" type="radio" value="0" checked="checked"
                  />文本
                </label>
                <label
                  ><input name="change1" type="radio" value="1" />图片
                </label>
              </form>
            </div>
            <input
            type="text"
            id="input1"
            class="add-new-ipt inputNumber"
            placeholder="排序  0~100"
          />

          <textarea
            type="text"
            style="height:80px;"
            rows="30"
            cols="20"
            type="text"
            class="add-new-ipt"
            id="myText1"
            placeholder="请输入快捷回复内容"
          ></textarea>
          <a
            href="javascript:;"
            class="add-new-btn"
            onclick="handleModify1()"
            >修   改</a
          >
          </div>
        </div>
      </div>

      <!-- 删除快捷回复弹窗 -->
      <div class="add-new-quick-box" id="add-new-quick-box2">
          <div class="add-new-inner">
            <div class="add-new-header">
              删除快捷回复
              <i class="icon-jslt-02" onclick="cancelAddQuick2()"></i>
            </div>
            <div class="add-new-form">
              <div class="add-new-choose">
                <span></span>
                <form action="" method="get">
                  确定删除 ？

                </form>
              </div>

            <a
              href="javascript:;"
              class="add-new-btn"
              onclick="handleDelete()"
              >删 除</a
            >
            </div>
          </div>
        </div>

      <!-- 用户详情弹框 -->
      <div class="m-uinfo-box-cover" id="m-uinfo-box-cover">
        <div class="m-uinfo-box">
          <div class="m-uinfo-header">
            <i class="icon-jslt-02" onclick="closeUinfoBox()"></i>
          </div>
          <div class="m-uinfo-main" id="m-uinfo-main">
            <!-- <img src="../assets/images/36d55e28202ceba349998477f2597eef.jpg" class="avatar">
                    <p class="nickname">
                        <span>张三</span>
                        <i class="icon-jslt-07"></i>
                        <i class="icon-jslt-06" style="display:none;"></i>
                    </p>
                    <p class="account">账号：zhangsan</p>
                    <div class="other">
                        <p>
                            <span>备 注</span>
                            <span class="ellipsis">张三</span>
                        </p>
                        <p>
                            <span>地 区</span>
                            <span class="ellipsis">四川 成都</span>
                        </p>
                        <p>
                            <span>来 源</span>
                            <span class="ellipsis">通过手机号搜索添加</span>
                        </p>
                    </div> -->
          </div>
        </div>
      </div>

      <div class="loading" id="loading">
        <img src="./assets/images/loading.gif" alt="" />
      </div>
    </div>
    <script type="text/javascript">
    // 增加快捷回复排序框限定正则
      document.getElementById("input").addEventListener("input", inputFilter);
      function inputFilter() {
        let filterValue = this.value.replace(
          /^([0-9]\d{0,1})(\.\d{0,2})?|.*$/g,
          "$1$2"
        );
        this.value = filterValue.replace(/^(0)(\d)/g, "$2");
      }
      // 修改快捷回复排序框限定正则
      document.getElementById("input1").addEventListener("input", inputFilter);
      function inputFilter() {
        let filterValue = this.value.replace(
          /^([0-9]\d{0,1})(\.\d{0,2})?|.*$/g,
          "$1$2"
        );
        this.value = filterValue.replace(/^(0)(\d)/g, "$2");
      }
    </script>
    <!-- <script>
        var elUa = document.querySelector('#ua');
        elUa.innerHTML = navigator.userAgent
    </script> -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="./plugs/base64/base64.js"></script>
    <script src="./plugs/viewer/viewer.min.js"></script>
    <script src="./plugs/kindeditor/plug/modal/modal.min.js"></script>
    <script src="./plugs/kindeditor/plug/qiniu/qiniu.min.js"></script>
    <script src="./plugs/kindeditor/plug/qiniu/crypto-js.js"></script>
    <script src="./plugs/kindeditor/plug/qiniu/qiniu.upload.token.js"></script>
    <script src="./plugs/kindeditor/plug/qiniu/qiniu.upload.formdata.js"></script>
    <script src="./plugs/kindeditor/lib/tool.min.js"></script>
    <script src="./plugs/kindeditor/lib/interactive.min.js"></script>
    <script src="./plugs/kindeditor/lib/all.js"></script>
    <script src="./plugs/kindeditor/kindeditor-all.js"></script>
    <script src="./plugs/kindeditor/lang/zh-CN.js"></script>
    <script src="./plugs/kindeditor/editor/script.js"></script>
    <script src="./lib/jquery-3.2.1.js"></script>
    <script src="./lib/scrollBar.js"></script>
    <script src="./utils/formatChat.js"></script>
    <script src="./utils/shortCut.js"></script>
    <script src="./lib/jquery.lazyload.min.js"></script>
    <script>
      //初始化富文本框
      var editor = new ChatBox("ipt-area");
      editor.init({
        qiniu_accp: "ck/chat/",
        edtConfig: {
          // width: '140px',
          // height: '300px'
        }
      });
      // editor.focus();
      // id: 'ipt-area'
      // });
      // KindEditor.ready(function(K) {
      //         window.editor = K.create('#ipt-area');
      // });
      // // 注册快捷键
      // var shortCut = new ShortCut();
      // setTimeout(function(){
      //     shortCut.init(CHAT_EDITOR.edit.doc);
      // },100);
      // shortCut.feedback('enter', function () {
      //     handleClickSendMsg();
      // });
      // shortCut.feedback('ctrlEnter', function () {
      //     handleClickSendMsg();
      // });

      // // 自定义滚动条--左侧联系人列表区
      // new CusScrollBar({
      //     contentSelector: '#dropView', //滚动内容区
      //     barSelector: '#scoll_contact_bar', //滚动条
      //     sliderSelector: '#scoll_contact_slider' //滚动滑块
      // });
      // // 自定义滚动条--右侧聊天记录区
      // new CusScrollBar({
      //     contentSelector: '.scroll_cont', //滚动内容区
      //     barSelector: '.scroll_bar', //滚动条
      //     sliderSelector: '.scroll_slider' //滚动滑块
      // });

    </script>
    <script src="./js/index.js"></script>
  </body>
</html>
